<template>
	<view>
		<navigation :username="username" :mobile="mobile"></navigation>
		<view class="bottom">
			<image :src="book.image"></image>
			<view class="info">
				<view>
					<text class="name">
						<text>商品名：</text><text>{{book.name}}</text>
					</text>
				</view>
				<view class="author">
					<text>
						<text>卖家：</text><text>{{book.shopName}}</text>
					</text>
				</view>
				<view class="bookInfo">
					<view class="isbn">
						<text>
							<text>关键字：</text><text>{{book.keyword}}</text>
						</text>
					</view>
					<view class="price">
						<text>
							<text>价格：</text><text>￥{{book.price}}</text>
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="comments">
		</view>
		<view class="fixBottom">
			<view class="left">
				<view class="left_first" @click="navigate">
					<view>
						<image src="../../static/images/shop.png"></image>
					</view>
					<view>店铺</view>
				</view>
				<view class="left_second" @click="collectSelect(book_id,book.title)">
					<view>
						<image :src="image_url"></image>
					</view>
					<view>收藏</view>
				</view>
				<view class="left_third" @click="chatUser">
					<image src="../../static/images/chat.png"></image>
					<text>私聊</text>
				</view>
			</view>
			<view class="right">
				<view class="right_first" @click="addCart(book)">
					<view>加入购物车</view>
				</view>
				<view class="right_second" @click="placeOrder">
					<view>立即购买</view>
				</view>
			</view>
		</view>
		<!-- <popup-component :show="show" :sellerId="sellerId" :bookImage="currentImage" :bookPrice="book.price"
			:bookNum="book.number"></popup-component> -->
			<spend-component @successMethod="successMethod"></spend-component>
	</view>
</template>
<script>
	import navigation from "@/components/navigationBar.vue"
	import popupComponent from "@/components/popupComponent.vue"
	import spendComponent from "@/components/spendMoney/index.vue"
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				book_id: 0,
				book: [],
				username: '', //发布书籍的人
				userImage: "", //发布书籍的人的图片
				userId: 0, //当前登录的用户id
				user: [],
				sellerId: 0, //卖家ID
				mobile: "",
				image_url: "../../static/images/collect.png",
				imageBool: false,
				flag: "", ///验证用户是否已经收藏
				show: false, //底部弹出框，默认是false
				currentImage: "", //当前图书的图片地址,
				cartListTemp: {},
			}
		},
		onLoad: function(option) {
			let now = new Date();
			let month = now.getMonth() + 1; //月
			let day = now.getDate();
			let temp = "";
			temp = month + "月" + day + "日";
			this.book_id = option.productId;
			console.log(option.productId)
			this.getIsCollect(option.productId, uni.getStorageSync('id'))
			this.dataGet(option.productId);
		},
		methods: {
			successMethod(){
				this.successMethod2();
			},
			async successMethod2(){
				const res = await this.$JerryRequest({
					url:"/insertOrder",
					method:"POST",
					data:{
						productId:this.book.productId,
						userId: uni.getStorageSync('id'),
						num: 1,
						price: this.book.price
					},
					satoken: uni.getStorageSync('token')
				})
				if(res.data.code === 200){
					this.$store.state.JerryMask = false;
					return uni.showToast({
						title:"下单成功"
					})
				}else {
					return uni.showToast({
						title:"下单失败"
					})
				}
			},
			navigate() {
				if (!uni.getStorageSync("id")) {
					this.$Inter.JerryAlert("您还未登录");
					return;
				}
				let that = this;
				uni.navigateTo({
					url: "../warehouse/index?sellerId=" + that.sellerId + "&username=" + uni.getStorageSync('username')
				})
			},
			placeOrder() {
				this.show = true;
				this.$store.state.JerryMask = true;
				this.$store.dispatch("setbookOrderRec", this.book.productId);

			},
			//查询是否已经加入购物车
			async selectCart(book){
				const res = await this.$JerryRequest({
					url:"/cartSelect?user_id="+ uni.getStorageSync('id')+"&product_id="+this.book.productId,
					satoken: uni.getStorageSync('token')
				})
				// console.log(res)
				if(res.data.msg == "暂未加入购物车"){
					const result = await this.$JerryRequest({
						url:"/insertCart",
						method:"POST",
						data:{
							userId: uni.getStorageSync("id"),
							productId: this.book_id
						},
						satoken: uni.getStorageSync('token')
					})
					this.$store.state.cartList.push(book);
					return uni.showToast({
						title:"添加成功"
					})
				}else {
					return uni.showToast({
						title:"该商品已经添加进购物车了"
					})
				}
			},
			addCart(book) {
				let ob = {};
			    this.selectCart(book);
			},
			async getIsCollect(book_id, user_id) {
				const res = await this.$JerryRequest({
					url: "/selectcollect?product_id=" + book_id + "&user_id=" + user_id,
					satoken: uni.getStorageSync("token")
				})
				// console.log(res)
				let flag = res.data.msg;
				if (flag == '已收藏') {
					this.image_url = "../../static/images/collectSelcted.png";
					this.imageBool = true;
				} else {
					this.image_url = "../../static/images/collect.png";
					this.imageBool = false;
				}
			},
			async dataGetUserImage(username) {
				const res = await this.$JerryRequest({
					url: "/getImageByUsername?username=" + username
				});
				uni.navigateTo({
					url: "../chat/index?username=" + username + "&userImage=" + res.data
				})
			},
			chatUser() {
				const res = this.$Inter.judgement(uni.getStorageSync("username"));
				if (res === 0) {
					return;
				}
				if (this.sellerId == this.userId) {
					this.$Inter.JerryAlert("该本书是您发布的");
					return;
				}
				let that = this;
				this.dataGetUserImage(this.user.username)
			},
			async dataGet(id) {
				let that = this;
				const res = await this.$JerryRequest({
					url: "/searchById?productId=" + id,
					satoken: uni.getStorageSync('token')
				})
				// console.log(res)
				that.book = res.data.data;
				// this.currentImage = res.data.data.image;
			},
			async insertMethod() {
				const res = await this.$JerryRequest({
					method: "POST",
					url: "/insertcollect",
					data: {
						userId: uni.getStorageSync('id'),
						productId: this.book_id,
					},
					satoken: uni.getStorageSync("token"),
				});
				// console.log(res);
				this.image_url = "../../static/images/collectSelcted.png";
			},
			async deleteMethod(){
				const res = await this.$JerryRequest({
					
				})
			},
			insertBook(way) {
				let that = this;
				if (way == 1) {
					this.insertMethod();
				}
				if (way == 2) {
					this.deleteCollect(uni.getStorageSync("id"), uni.getStorageSync("bookId"));
					this.$api.insertBookCollect(this.book_id, -1);
				}
			},
			async userGet(id) {
				const res = await this.$JerryRequest({
					url: "/userGetById?userId=" + id,
					token: uni.getStorageSync("token"),
				})
				this.user = res.data;
				this.username = res.data.username;
				this.content = "复制联系方式: " + this.user.mobile
				this.mobile = this.user.mobile;
				this.$store.state.userImage = res.data.image;
			},
			infoSearch() {

			},
			async deleteCollect(user_id, book_id) {
				this.$JerryRequest({
					url: "/deleteUserCollect?user_id=" + user_id + "&book_id=" + book_id,
					method: "DELETE",
					token: uni.getStorageSync("token")
				})
			},
			collectSelect(book_id, title) {
				this.imageBool = !this.imageBool;
				if (this.imageBool === true) {
					this.insertBook(1);
					this.image_url = "../../static/collectSelcted.png";
					return uni.showToast({
						title: "收藏成功"
					})
				} else {
					this.insertBook(2)
					this.image_url = "../../static/collect.png"
					return uni.showToast({
						title: "取消收藏"
					})
				}
			}
		},
		onShow() {},
		components: {
			navigation,
			popupComponent,
			spendComponent,
		},
		computed: {

		}
	}
</script>
<style lang="scss">
	.profileInfo {
		flex: 4;
		justify-content: center;
		align-items: center;
	}

	.bottom {
		margin-top: 5%;

		image {
			width: 70%;
			height: 500rpx;
			margin-left: 15%;
			margin-top: 5%;
		}

		.author {
			margin-top: 14rpx;

			text:nth-child(1) {
				font-size: 13px;
				color: #ffffff;
				background-color: #ff0000;
			}

			text:nth-child(2) {
				font-size: 15px;
				font-weight: 700;
				background-color: #FFFFFF;
				color: #000000;
				margin-left: 10rpx;
			}
		}

		.info {
			margin: 0 3%;
			margin-top: 10px;

			.name {
				font-size: 13px;

				text:nth-child(1) {
					color: #ffffff;

					background-color: #ff0000;
				}

				text:nth-child(2) {
					font-size: 14px;
					font-weight: 700;
					background-color: #FFFFFF;
					color: #000000;
					line-height: 20px;
				}
			}

			.bookInfo {
				margin-top: 10rpx;
				display: flex;

				.isbn {
					text:nth-child(1) {
						font-size: 13px;
					}

					text:nth-child(2) {
						font-size: 15px;
						font-weight: 700;
					}

					flex:1;
				}

				.price {
					text:nth-child(1) {
						font-size: 13px;
					}

					text:nth-child(2) {
						font-size: 15px;
						font-weight: 700;
						color: #ff0000;
					}

					flex:1;
				}
			}
		}
	}

	.fixBottom {
		display: flex;
		height: 120rpx;
		position: fixed;
		background-color: #ece9eb;
		bottom: 0;
		left: 0;
		width: 100%;

		.left {
			image {
				width: 40rpx;
				height: 40rpx;
			}

			font-size: 12px;
			flex: 2;
			display: flex;
			justify-content: center;
			align-items: center;

			.left_first {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.left_second {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.left_third {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				text {
					margin-top: 2px;
				}
			}
		}

		.right {
			flex: 2;
			display: flex;
			justify-content: center;
			align-items: center;

			.right_first {
				flex: 1;
				flex-direction: column;
				display: flex;
				justify-content: center;
				align-items: center;

				view {
					background-image: linear-gradient(to right, #ebee09, #ee745b);
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					width: 100%;
					height: 80rpx;
					color: #FFFFFF;
					border-radius: 40rpx 0 0 40rpx;
				}
			}

			.right_second {
				flex: 1;
				flex-direction: column;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 80rpx;
				color: #FFFFFF;
				background-image: linear-gradient(to right, #ee745b, #ee3507);
				border-radius: 0 40rpx 40rpx 0;
			}
		}
	}
</style>